<template>
	<view class="my_page padding20" :style="{'background-image': `url(${Http_url}/static/images/index_bg.png)`}">
		<view class="content bgWhite shadow">
			<view class="barbox shadow radius14 padding20 acea-row row-middle ">
				<view class="back blod600" @click="back">
					<text class="iconfont icon-zuo size12" style="padding-right: 10rpx;"></text>
					<text class="txt font_medium">返回</text>
				</view>
				<view class="title size18 font_bold blod600">会员管理（{{totalUser}}）</view>
			</view>
			<view class="midbox paddingl20">
				<view class="searchbox paddingt20 margint20 acea-row row-between-wrapper">
					<view class="search bgHui padding20 radius8 acea-row row-between-wrapper">
						<input class="uni-input" style="width: calc(100% - 60rpx);" v-model="keyworld" focus placeholder="输入用户昵称" />
						<text class="iconfont icon-sousuo blod600" @click="search"></text>
					</view>
					<view class="typebox">
						<view class="type bgHui radius8 padding20 acea-row row-between-wrapper">
							<text class="ellipsis" style="width: 60rpx;">{{stateList[state]}}</text>
							<text class="iconfont icon-xiangxia size12 blod600" v-if="!isShow" @click="isShow = true"></text>
							<text class="iconfont icon-xiangshang size12 blod600" v-else @click="isShow = false"></text>
						</view>
						<view class="typelist padding20 bgHui radius8 blod500" v-if="isShow">
							<view class="list-item" v-for="(item,ii) in stateList" :key="ii" :class="state === ii ? 'checked':''" @click="selectType(ii)">{{item}}</view>
						</view>
					</view>
				</view>
				<view class="userlist" >
		
                    <mescroll-body
                            class="mescroll-body"
                            @init="mescrollInit" 
                            @down="downCallback" 
                            @up="upCallback" 
                            :down="downOption" 
                            :up="upOption"
                            height="400rpx"
                            top="10rpx"
                        >
                            <view class="list-item margint20 acea-row row-between-wrapper" v-for="(item,index) in userList" :key="item.id">
                                <view class="list-mid acea-row row-middle">
                                    <view class="avatar">
                                        <image :src="item.wx_img"></image>
                                    </view>
                                    <view class="info" >
                                        <view style="display: flex;">
                                            <text class="user-name name font_medium blod600">{{item.wx_name}}</text>
                                            <u-tag text="黑名单" type="error" size="mini"  bgColor="#FD7C93" v-if="item.is_zt == 2"></u-tag>
                                        </view>
                                        
                                        <view class="time size12 hui">注册时间：{{item.time}}</view>
                                    </view>
                                </view>
                                <view class="btnbox acea-row row-between-wrapper">
                                    <!-- <view class="btn" :style="{'background-image': `url(${Http_url}/static/images/tel.png)`}"></view> -->
                                    <view class="btn" :style="{'background-image': `url(${Http_url}/static/images/sys.png)`}" @click="sysUser(item)"></view>
                                </view>
                            </view>
                     </mescroll-body> 
		
				</view>
			</view>
		</view>
		<view class="upoup acea-row row-center-wrapper" v-if="isShowUpoup">
			<view class="upoup-bg"></view>
			<view class="upoup-mid padding20">
				<view class="top acea-row row-between-wrapper">
					<view class="title size18 font_medium blod600">设置</view>
					<view class="close acea-row row-right row-middle">
						<text class="iconfont icon-guanbi size22 blod600" @click="isShowUpoup = false"></text>
					</view>
				</view>
				<view class="main">
					<view class="item paddingt20 acea-row row-between-wrapper">
						<view class="left">头像</view>
						<view class="right">
							<view class="avatar">
								<image :src='userInfo.wx_img'></image>
							</view>
						</view>
					</view>
					<view class="item paddingt20 acea-row row-between-wrapper">
						<view class="left">昵称</view>
						<view class="right font_medium blod600">
							<input type='text' name='wx_name' disabled :value='userInfo.wx_name' maxlength="10"></input>
						</view>
					</view>
					<view class="item paddingt20 acea-row row-between-wrapper">
						<view class="left">手机号</view>
						<view class="right font_medium blod600">
							<input type='text' name='l_tel' disabled :value='userInfo.l_tel' maxlength="10"></input>
						</view>
					</view>
					<view class="item paddingt20 acea-row row-between-wrapper">
						<view class="left">黑名单</view>
						<view class="right">
							<switch color="#FEA40B" :checked="userInfo.is_zt===2 ? true:false" style="transform:scale(0.7)" @change="switchChange"/>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>	
</template>

<script>
    import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { mapGetters } from "vuex";
	import nolist from "@/components/nolist.vue";
	import {getLoadUserList,setBlack} from "@/api/user.js";
	import {Http_url} from '@/config/config.js'
	export default {
		computed: mapGetters(['isLogin', 'globalData']),
		components: {
			nolist
		},
        mixins: [MescrollMixin],
		data() {
			return {
				Http_url:Http_url,
				barHeight:0,
				userInfo:{},
				userList:[],
				state:0,
				stateList:['全部','正常','黑名单'],
				totalUser:0,//总的会员数
				isShow:false,
				isShowUpoup:false,
				limit:20,
				page:1,
				keyworld:'',
				loading:false,
                // 下拉刷新的配置(可选, 绝大部分情况无需配置)
                downOption: { 
                	// auto: false
                },
                // 上拉加载的配置(可选, 绝大部分情况无需配置)
                upOption: {
                	// auto: false,
                	page: {
						num:0,
                		size: 10 // 每页数据的数量,默认10
                	},
                	noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                	empty: {
                		tip: '暂无相关数据'
                	},
                	textNoMore: '没有更多了'
                },
			};
		},
		created() {
			uni.setNavigationBarTitle({
				title: this.globalData.systemName
			});
		},
		onLoad() {
			this.barHeight=this.globalData.barHeight
		},
		methods: {
			back(){
				uni.navigateBack({
					delta: 1,
				})
			},
			selectType(index){
				this.state = index
				this.isShow = false
				this.search()
			},
			switchChange(e){
				// console.log(e.detail.value)
				let state = e.detail.value
				this.userInfo.is_zt = state ? 2:1
				this.setBlacksys()
			},
			sysUser(item){
				this.userInfo=item
				this.isShowUpoup=true
			},
			search(){
				this.downCallback()
			},
			// 设置黑名单
			setBlacksys(){
				let param={
					id:this.userInfo.id,
					state:this.userInfo.is_zt
				}
				setBlack(param).then(res => {
					this.$util.Tips({
						title:'设置成功'
					})
				}).catch(err=>{
					this.$util.Tips({
						title:err
					})
				})
			},
            
            /*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
            mescrollInit(mescroll) {
            	this.mescroll = mescroll;
            },
            
            // 下拉刷新的回调, 重置列表为第一页 (此处可删,mixins已默认)
            downCallback(){
            	this.userList = []
            	this.mescroll.resetUpScroll();
            },
            /*上拉加载的回调*/
            upCallback(page) {
            	let pageNum = page.num; // 页码, 默认从1开始
            	let pageSize = page.size; // 页长, 默认每页10条
                let param={
                	list_rows: pageSize,
                	page: pageNum,
                	is_zt:this.state,
                	wx_name:this.keyworld
                }
                this.loading=true
				if(page.num == 1) this.userList=[]
                getLoadUserList(param).then(res => {
                	const list = res.data
                	this.userList = this.userList.concat(list)
					this.mescroll.endBySize(list.length, res.count);
                	this.mescroll.endSuccess(list.length, list.length >= page.size)
                    this.totalUser=res.count
                    this.loading=false
                    
                }).catch(err=>{
                	this.$u.toast(err.message || '')
                	this.mescroll.endErr()
                })
            },
		}
	}
</script>

<style lang="scss">
	.my_page{
		width: 100%;
		background-position: top;
		background-size: contain;
		background-repeat: no-repeat;
	}
	.content{
		// height: calc(100% - -10rpx);
		border-top-left-radius: 14px;
		border-top-right-radius: 14px;
		.barbox{
			.title{	
				width: calc(100% - 120rpx);
				text-align: center;
			}
		}
		.midbox{
			.searchbox{
				.search{
					width: calc(100% - 160rpx);
				}
				.typebox{
					position: relative;
					width: 130rpx;
					margin-left: 10rpx;
					.type{
					}
					.typelist{
						position: absolute;
						top: 90rpx;
						width: 130rpx;
                        z-index: 10;
						.list-item{
							padding: 6rpx 0;
						}
						.checked{
							font-weight: 600;
						}
					}
				}
			}
            
            .list-mid{
                flex: 1;
                width: 0;
            }
			.userlist{
				.avatar{
					width: 100rpx;
					height: 100rpx;
					border: 4rpx solid #FFFFFF;
					border-radius: 50%;
					overflow: hidden;
				}
				.info{
                    width: 0;
                    flex: 1;
					margin-left: 10rpx;
				}
				.btnbox{
					.btn{
						width: 60rpx;
						height: 60rpx;
						margin: 0 10rpx;
						background-position: center;
						background-size: contain;
						background-repeat: no-repeat;
					}
				}
			}
		}
	}
	.upoup-bg{
		background-color: rgba(0, 0, 0, 0.5) !important;
	}
	.upoup-mid{
		.top{
			margin-bottom: 20rpx;
			.title{
				width: calc(100% - 60rpx);
				text-align: center;
			}
		}
		.item{
			.right{
				text-align: right;
				.avatar{
					width: 72rpx;
					height: 72rpx;
					border-radius: 50%;
					overflow: hidden;
				}
			}
		}
	}
    
    .user-name{
        margin-right: 15rpx;
    }
</style>
